<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>012组件使用中的细节点is</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="root">
   <table>
     <tbody>
       <tr is="row"></tr>
       <tr is="row"></tr>
       <tr is="row"></tr>
     </tbody>
   </table>
   <ul>
     <li is="rowLi"></li>
     <li is="rowLi"></li>
     <li is="rowLi"></li>
     <li is="rowLi"></li>
   </ul>
   <span>--------------</span>
   <h6>子组件定义data时，必须是函数，不能是对象</h6>
   <table>
     <tbody>
       <tr is="rowData"></tr>
       <tr is="rowData"></tr>
       <tr is="rowData"></tr>
     </tbody>
   </table>
   <span>--------------</span>
    <h6>组件的ref使用</h6>
    <span>1. 普通的div绑定click事件</span>
    <div
        @click="handleClick">
      hello world
    </div>
    <span>2.点击后显示组件里的内容:使用ref</span>
    <div
        ref="hello"
        @click="handleClickShow">
          hello ref
    </div>
  </div>
  <script>
    // 全局注册组件
    Vue.component('row', {
      template: '<tr><td>this is a row</td></tr>'
    })
    var vm = new Vue({
      el: "#root",
      data: {

      },
    // 局部注册组件
      components: {
        "rowLi": {
          template: "<li>this is li</li>"
        },
        "rowData": {
          data: function() {
            return {
              content: "this is rowData"
            }
          },
          template: "<tr><td>{{content}}</td></tr>"
        }
      },
      methods: {
        handleClick: function() {
          console.log("click");
        },
        handleClickShow: function() {
          console.log(this.$refs.hello.innerHTML);
        }
      },
    })
  </script>
</body>
</html>